<!-- HTML5文件 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
		<meta name="format-detection" content="telephone=no">
		<title>html title</title>

		<link rel="stylesheet" href="../assets/agile/css/agile.layout.css">
		<link rel="stylesheet" href="../assets/third/seedsui/plugin/seedsui/seedsui.min.css">
		<link rel="stylesheet" href="../assets/third/seedsui/plugin/animate/animate.css">
		<style>
			.titlebar,.tab.active{
				background-color:#18B2ED;
			}
			.titlebar h1,.tab.active label{
				font-weight:bold;
				color:white;
			}
			.titlebar a i,.titlebar a label{
				color:white;
			}
			.art_mid{
				top:45px;
				bottom:40px
			}
			article span{
				font-size:1.5em
			}
			.serachinput_match{
				position:relative;
				width:98%;
				border:1px solid;
				border-top-width:0px;
				border-color:#C0C0C0;
				padding:2px;
				z-index:1;
				background-color:white
			}
			.double{
				background-color:green;
			}
		</style>
	</head>
	<body>
		<div id="section_container">
		 <section id="sectionid" data-role="section" class="active">
		 	<header>
		 		<div class="titlebar" >
		 			<a class="left">
		 				<label class="bold"><i class="icon icon-arrowleft-fill"></i>登出</label>
		 			</a>
		 			<h1 class="text-center ">首页</h2>
		 			<a class="right">
		 				<i class="icon icon-menu-fill"></i>
		 			</a>
		 		</div>
		 	</header>
		 	<article id="article_main" data-role="article" data-transition="slide"   class="active art_mid" >
		 		<div id="form" >
		 		</div>
		 		<div id="list">
		 			<div class="input-box">
                    <input placeholder="查询" v-model="serachstr" ></input>
                    </div>
                    <div style="position:absolute">
		 			<template v-for="(i,index) in selfList">
		 			<div :class="{'double': index % 2 == 0}">
		 				{{index}}-----{{i.title}}
		 			</div>
		 			</template>
		 			</div>
                    <div class="serachinput_match" v-if="serachData.length>0" >
                    	<li v-for="item in serachData" @click="selected(item)" >{{item}}</li>
                    </div>
		 		</div>
		 	</article>
		 	<article id="article_serv"  data-role="article" data-transition="slide"  class="art_mid" >
		 		<div id="tree" style="padding:5px">
		 		<a data-toggle="view" href="#sub1" data-istoggle="true" class="active"><span >root</span></a>
		 			<ul id="sub1" data-role="view"  style="position:relative;left:5px" class="">
		 				<li><span>item</span></li>
		 				<li><span>item</span></li>
		 				<li>
		 					<a data-toggle="view" href="#sub2" data-istoggle="true"><span >item</span></a>
		 					<ul id="sub2" data-role="view"  style="position:relative;left:5px">
		 				      <li><span>item-1</span></li>
		 				      <li><span>item-2</span></li>
		 					</ul>
		 				</li>
		 				<li>
		 					<a data-toggle="view" href="#sub3" data-istoggle="true"><span >item</span></a>
		 					<ul id="sub3" data-role="view"  style="position:relative;left:5px">
		 				      <li><span>item-1</span></li>
		 				      <li><span>item-2</span></li>
		 					</ul>
		 				</li>
		 			</ul>
		 		</div>
		 	</article>
		 	<article id="article_conf" data-role="article" data-transition="slide" data-scroll="verticle" class="art_mid" >
		 		<div class="scroller">
		 			pageconfig
                    <div >
                    	<img src="../img/user/me.jpg" id="pic"></img>
                    </div>
		 		</div>
		 	</article>
		 	<footer>
				<ul class="menubar" style="line-height: 40px;">
					<li class="tab active" data-role="tab" href="#article_main" data-toggle="article">
						<label class="text-center">首页</label>
					</li>
					<li class="tab " data-role="tab"  href="#article_serv" data-toggle="article">
						<label class="text-center">tree</label>
					</li>
					<li class="tab " data-role="tab"  href="#article_conf" data-toggle="article">
						<label class="text-center">设置</label>
					</li>
				</ul>
		 	</footer>
		 </section>
		</div>
		<script src="../assets/third/amd/require.js" ></script>
		<script src="../assets/app/js/app.require.js"></script>
		<script>
		 require(['vue','agile'],function(Vue){
		 	var bean ={
		 		id:'1',
		 		name:'myname',
		 		value:'hellow'
		 	}
		 	
		 	
		 	var formVM = new Vue({
		 		el:'#form',
		 		template:'<div>\
		 		           <span>{{formbean.value}}</span><br/>\
		 		           <input v-bind:name="formbean.name" v-bind:id="formbean.id" v-model="formbean.value"></input>\
		 		          <span class="button" @click="look">test</span>\
		 		          </div>',
		 		data:{
		 			formbean:bean
		 		},
		 		methods:{
		 			look:function(){
		 			  alert(JSON.stringify(bean))	
		 			}
		 		}
		 	})
		 	
		 	
		 	var list = []
		 	var listVm = new Vue({
		 		el:"#list",
		 		data:{
		 			selfList:list,
		 			serachstr:"",
		 			serachData:[],
		 			ismatch:false
		 		},
		 		methods:{
		 			selected:function(data){
		 				this.serachstr = data
		 			}
		 		},
		 		watch:{
		 			serachstr:function(val,oldval){
		 				if (val.length>0){
		 					  this.serachData=[]
		 					  for(key in this.selfList){
		 					   if (this.selfList[key].title.indexOf(val)>-1)
		 					    this.serachData.push(this.selfList[key].title)
		 					  }
		 					  if (this.serachData.length==1){
		 					  	this.serachData=[]
		 					  }
		 				}else{
		 					this.serachData=[]
		 				}
		 			}
		 		},
		 		created:function(){
		 		   for (var i=1;i<15;i++){
		 		   	var json = {
		 		   		title: i+"titlename"+(i+1),
		 		   		sub_title:i+"subtitle"
		 		   	}
		 		   	this.selfList.push(json)
		 		   }
		 		}
		 	})
		 	
		 	//Vue.component('tree',{
		 		//template:'<li><a v-if="haschildren" @click="toggle"><span >{{item.title}}</span></a>\
		 		          //<span v-else>{{item.title}}</span>\
		 					//<ul v-if="item.isopen"  style="position:relative;left:5px">\
		 				      //<tree v-for="item in item.children" :item="item></tree>\
		 					//</ul>\
		 				//</li>',
		 		//props:{
		 			//item:Object
		 		//},
		 		//data:{
		 			//isopen:false
		 		//},
		 		//computed:{
		 			//haschildren:function(){
		 				//return this.item.children&&this.item.children.length
		 			//}
		 		//},
		 		//methods:{
		 			//toggle:function(){
		 				//if (this.haschildren)
		 				 //this.isopen = !this.isopen
		 				//else
		 				 //alert(this.item.title)
		 			//}
		 		//}
		 	//})
		 	
		 	$('#pic').on('click',function(){
		 		var opt = {
                   id : 'psc',//pictureShow组件实际会创建一个section页容器展示。页容器的id即为此id值，section控制器的所有操作都适合
                   index : 0,//默认显示的图文信息的索引号，从0开始
                   title : '新闻标题',
                   list : [
                          {
                              imgURL : '../img/user/me.jpg',//当前帧显示的图片地址
                              content : '内容'//当前帧显示的新闻内容
                          }
                          ]
                  }
                  A.Component.pictureShow(opt)
		 	})
		 	
		 });
		</script>
	</body>
</html>